<template>
  <BasicTabs v-model="tabname" :tabs="tabs"  @tabChange="tabsChange"> </BasicTabs>
</template>

<script setup lang="ts">
  import { TabPaneItem } from '@/components/ui/basic-tabs/types'
  import GroupStatus from '../components/tabComponents/groupStatus.vue'
  import MachineDetail from '../components/tabComponents/machineDetail.vue'
  import BucketStatistics from '../components/tabComponents/carding/bucketStatistics.vue'
  import ChangeSettings from '../components/tabComponents/changeSettings.vue'
  import HistoricalTrendChart from '../components/tabComponents/historicalTrendChart/index.vue'

  const tabname = ref()
  const tabs = shallowRef<TabPaneItem[]>([
    {
      name: '110910',
      label: '状态总览',
      roles: ['110910'],
      slots: { default: h(GroupStatus, { statusCode: '110910', processName: '梳棉' }) }
    },
    {
      name: '110920',
      label: '单机详情',
      roles: ['110920'],
      slots: { default: h(MachineDetail, { statusCode: '110920', processName: '梳棉' }) }
    },
    {
      name: '110930',
      label: '条桶统计',
      roles: ['110930'],
      slots: { default: h(BucketStatistics, { statusCode: '110930', processName: '梳棉' }) }
    },
    {
      name: '110960',
      label: '设置变更',
      roles: ['110960'],
      slots: { default: h(ChangeSettings, { statusCode: '110960', processName: '梳棉' }) }
    },
    {
      name: '110950',
      label: '历史趋势图',
      roles: ['110950'],
      slots: { default: h(HistoricalTrendChart, { statusCode: '110950', processName: '梳棉' }) }
    }
  ])

  const tabsChange = (tab) => {
    console.log(tab)
  }
</script>
